<template>
	<div>
		<div style="min-height: 780px;" class="no1">
			<div style="min-height: 780px;" class="no1_content">
				<div style="padding-top: 160px;">
					<img src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMy9mYjU4YzQ4YTU0M2RjMjMwNjhlYWIyZDY4NjA3NjkyZi0xMTB4MjAwLTkwLndlYnA_p_p100_p_3D.webp" />
				</div>
				<div style="line-height: 70px;font-size: 48px;">
					AFFORDABLE PARIS TOURS
				</div>
				<div style="line-height: 70px;font-size: 18px;">
					CITY TOURS / TOUR TICKETS / TOUR GUIDES
				</div>
				<div>
					<el-button>VIEW TOURS</el-button>
				</div>
				<div style="padding-top: 100px;">
					<div class="el-icon-caret-bottom icon-bottom"></div>
				</div>
			</div>
		</div>
		<!---->
		<div style="padding: 100px 80px;">
			<title_slot title_com="巴黎旅游景点" comtent_com="Quisque at tortor a libero posuer">
 				<div>
 					<tob></tob>
 				</div>
			</title_slot>
		</div>
	</div>
</template>

<script>
	import title_slot  from './title_slot.vue'
	import tob  from './tob.vue'
	
	export default {
		components: {
			title_slot,
			tob
		},
		data() {
			return {
				nun: 'hello'
			}
		}
	}
</script>

<style>
	.no1 {
		background-image: url(https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi9mYzZiODRlMTEzOTcwNTRjODY1MzExMmE5ZWMxOTIyZS05MC53ZWJw.webp);
		background-size: auto 100%;
	}
	
	.no1_content {
		background: rgba(0, 0, 0, 0.3);
		text-align: center;
		color: #FFFFFF;
	}
	
	.no1_content .el-button {
		width: 183px;
		color: red;
	}
	
	.no1_content .el-button:hover {
		color: red;
	}
	
	.no1 .icon-bottom {
		display: inline-block;
		width: 50px;
		height: 50px;
		border: 1px solid #FFFFFF;
		line-height: 50px;
		font-size: 20px;
		border-radius: 50%;
	}
</style>